<template>
  <view class="hot-types">
    <scroll-view scroll-x class="scroller">
      <view class="inner">
        <view class="item" v-for="item in list" :key="item.name" @tap="toPath(item.key)">
          <cl-skeleton :height="140" :width="140" :margin="[0, 0, 40, 0]" :loading="!item.name" :loading-style="{
							borderRadius: '100%',
						}">
            <cl-image :radius="140" :src="item.pic" background-color="#fff" />
          </cl-skeleton>

          <cl-skeleton :height="28" :loading="!item.name" :loading-style="{
							width: '90rpx',
							borderRadius: '6rpx',
						}">
            <cl-text :size="24" align="center" block>{{ item.name }}</cl-text>
          </cl-skeleton>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
  import { onShow } from "@dcloudio/uni-app";
  import { ref } from "vue";
  import { useCool } from "/@/cool";
  import { deepTree, imageUrl } from "/@/cool/utils";

  const { service, router } = useCool();

  const list = ref([
    {
      key: 'feature',
      name: '精品特选',
      pic: imageUrl('icon/zuanshi.png'),
    },
    {
      key: 'brand',
      name: '品牌介绍',
      pic: imageUrl('icon/huangguan.png'),
    },
    {
      key: 'contract',
      name: '联系我们',
      pic: imageUrl('icon/kefu.png'),
    },
  ]);

  function toPath(key : string) {
    if (key === 'brand') {
      router.push({
        path: '/pages/user/doc',
        query: {
          key: 'brand',
          title: '品牌介绍',
        },
      })
    } else if (key === 'contract') {
      router.push({
        path: "/pages/index/contract",
      })
    } else {
      router.push({
        path: "/pages/market/feature"
      })
    }
  }
</script>

<style lang="scss" scoped>
  .hot-types {
    height: 200rpx;
    overflow: hidden;
    margin: 50rpx 0 50rpx 0;

    .scroller {
      height: 200rpx;

      .inner {
        display: flex;
        align-items: center;
        margin: 0 50rpx;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 0 24rpx;
          margin: 0 20rpx;
        }
      }
    }
  }
</style>